<template>
	<view class="content">
		<view class="top">
			<image class="topbg" src="../../static/chouShang/topBg.png" mode="widthFix"></image>
			<view class="title">
				<view class="back">
					<!-- 返回键 -->
					<TextNavBar :bgColor="titleBgColor" title=" " style="position:relative;z-index: 9;"></TextNavBar>
				</view>
			</view>

			<view class="left-menu">
				<view class="item" @tap="openBangdan1">
					<image src="../../static/chouShang/No.png" mode="widthFix"></image>
					<view>消费榜</view>
				</view>
				<view class="item" @tap="rule">
					<image src="../../static/chouShang/rule.png" mode="widthFix"></image>
					<view>规则</view>
				</view>
				<!--item end-->
			</view>

			<view class="center-img">
				<swiper autoplay :style="'height:396rpx'">
					<swiper-item v-for="(item, index) in swiperList" :key="index">
						<image mode="aspectFill" :src="item.image + '?x-oss-process=image/resize,w_1200'"
							:style="'height:396rpx'" class="slide-image" />
					</swiper-item>
				</swiper>
			</view>
			<view class="right-menu">
				<view class="item1">
					<navigator url="/pages/myBox/index">
						我的仓库
					</navigator>
				</view>

				<view class="item2" @tap="openBangdan()">
					抽赏记录
				</view>
			</view>
			<view class="bottom-box">
				<image class="img-bg" mode="" src="../../../static/new/detail_bottom_box_bg.png"></image>
				<view class="line1_1" v-if="play_type == 5">
					<text :class="l1Sty" @tap="styChange1(1)">PK奖一览</text>
					<text :class="l2Sty" @tap="styChange1(2)">黄金池一览</text>
					<text :class="l3Sty" @tap="styChange1(3)">钻石池一览</text>
				</view>
				<view class="line1" v-else>
					<text :class="l1Sty" @tap="styChange(1)">赏品一览</text>

					<text :class="l2Sty" @tap="styChange(2)">赏品余量</text>
				</view>
				<view class="line2">
					<view class="item">
						<text class="mr"
							:class="dh">{{(play_type == 4 || play_type == 5||play_type == 7)?total:max_index}}</text>

						<text style="color: #847363;">总箱数</text>
					</view>
					<view class="item">
						<text class="mr" :class="dh">{{index}}</text>
						<text style="color: #847363;">已开箱</text>
					</view>

					<view class="item">
						<text class="mr" :class="dh">{{stock_all}}</text>
						<text style="color: #847363;">总库存</text>
					</view>
					<view class="item">
						<text class="mr" :class="dh">{{stock_has<0?0:stock_has}}</text>
						<text style="color: #847363;">已发放</text>
					</view>
				</view>

				<view class="line3" v-if="play_type == 4||play_type == 7">
					空车X{{kong_xiang}}
				</view>
				<view class="line3_1" v-else>
				</view>

				<view class="line4">
					<view class="last" @tap="last">
						<image style="width: 100%;height: 100%;" src="../../../static/new/detail_last.png"></image>
					</view>
					<view class="next" @tap="next">
						<image style="width: 100%;height: 100%;" src="../../../static/new/detail_next.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view :class="{'fixedTop':fixedTop}" class="goods-box" ref="goodsBox">
			<view class="tit">
				<view class="tips">
					<navigator url="/pages/myBox/index">
						我的仓库
					</navigator>
				</view>
				<view class="tips" @tap="openBangdan()">
					使用记录
				</view>
				<view class="ref" @tap="ref">
					<image src="../../static/chouShang/ref.png" mode="widthFix"></image>
				</view>
				<view class="openBox tips" @click="fnOpenBox"
					v-if="(play_type==4||play_type==5||play_type==7)&&(userInfo.id==10437 ||userInfo.id==10439)">
					开盒{{goods.id}}
				</view>
			</view>

			<view class="goods">
				<view class="hang">
					<scroll-view scroll-y="true" style="height: 65vh;" v-if="ylStatus">
						<view class="yl-item" v-for="item in goods.last_skus">
							<view class="title">
								{{item.title}}
							</view>
							<view class="num">
								{{item.stock}}/{{item.stock + item.sales}}
							</view>
							<view class="bl">
								<image class="icon" src="../../static/chouShang/bl.png" mode="widthFix"></image>
								实时概率:
								<text v-if="play_type == 3">
									<!-- 随机 -->
									<text v-if="item.last_prize_type == 6 || item.last_prize_type == 7">赠送</text>
									<text v-else>{{formatPrice1(item.odds)}}%</text>

								</text>
								<text v-else-if="play_type == 4||play_type==7">
									<!-- 空空 -->
									<text v-if="item.last_prize_type == 3">100%</text>
									<text v-else>赠送</text>
								</text>
								<text v-else-if="play_type == 5">
									<!-- pk -->
									<text v-if="item.last_prize_type == 5">赠送</text>
									<text v-else>{{formatPrice1(item.odds)}}%</text>
								</text>
								<text v-else-if="play_type == 6">
									<!-- 概率平均 -->
									<text v-if="item.last_prize_type == 6 || item.last_prize_type == 7">赠送</text>
									<text v-else>{{formatPrice1(item.odds)}}%</text>
								</text>
							</view>
						</view>
						<view class="yl-item" v-for="item in goods.skus">
							<view class="title">
								{{item.title}}
							</view>
							<view class="num">
								{{item.stock}}/{{item.stock + item.sales}}
							</view>
							<view class="bl">
								<image class="icon" src="../../static/chouShang/bl.png" mode="widthFix"></image>


								<text style="font-size: 24rpx;">
									获得概率:
									<text v-if="play_type == 3">
										<!-- 随机 -->
										<text v-if="item.last_prize_type == 6 || item.last_prize_type == 7">赠送</text>
										<text v-else>{{formatPrice1(item.odds)}}%</text>

									</text>
									<text v-else-if="play_type == 4||play_type == 7">
										<!-- 空空 -->
										<text v-if="item.last_prize_type == 3">100%</text>
										<text v-else>赠送</text>
									</text>
									<text v-else-if="play_type == 5">
										<!-- pk -->
										<text v-if="item.last_prize_type == 5">赠送</text>
										<text v-else>{{formatPrice1(item.odds)}}%</text>
									</text>
									<text v-else-if="play_type == 6">
										<!-- 概率平均 -->
										<text v-if="item.last_prize_type == 6 || item.last_prize_type == 7">赠送</text>
										<text v-else>{{formatPrice1(item.odds)}}%</text>
									</text>

								</text>

							</view>
						</view>
					</scroll-view>

					<scroll-view scroll-y="true" style="height: 65vh;" v-else>
						<view class="item" v-for="(item,index) in goods.last_skus">
							<view class="left" :style="{'background':'url(' + item.thumb + ')' , 'background-repeat'
									:'no-repeat', 'background-size' :'100% 100%' }" @tap="bigImg(index,1)">

								<view class="gang" v-if="item.stock > 0 && p_type != 2 && p_type != 3">
									<!-- {{item.stock}}/{{item.stock + item.sales}} -->
									{{item.title | titeFilter}} (<text v-if="play_type == 3">
										<!-- 随机 -->
										<text v-if="item.last_prize_type == 6 || item.last_prize_type == 7">赠送</text>
										<text v-else>{{formatPrice1(item.odds)}}%</text>

									</text>
									<text v-else-if="play_type == 4||play_type==7">
										<!-- 空空 -->
										<text v-if="item.last_prize_type == 3">100%</text>
										<text v-else>赠送</text>
									</text>
									<text v-else-if="play_type == 5">
										<!-- pk -->
										<text v-if="item.last_prize_type == 5">赠送</text>
										<text v-else>{{formatPrice1(item.odds)}}%</text>
									</text>

									<text v-else-if="play_type == 6">
										<!-- 概率平均 -->
										<text v-if="item.last_prize_type == 6 || item.last_prize_type == 7">赠送</text>
										<text v-else>{{formatPrice1(item.odds)}}%</text>
									</text>
									)

								</view>
								<view class="gang1" v-if=" item.stock == 0 && p_type != 2 && p_type != 3">
									<view class="sw">售罄</view>
								</view>
								<!-- <view class="he">
										05/20出荷
									</view> -->
							</view>
							<view class="right">

								<view class="title">
									{{item.title}}
								</view>

								<view class="price">
									参考价:
									<text
										style="font-weight: bold;color: #FF0000;">{{formatPrice(item.money_price)}}</text>
								</view>

								<!-- 	<view class="gl">
										获得概率:
										
									</view> -->

							</view>
						</view>

						<view class="item" v-for="(item,index) in goods.skus">
							<view class="left" :style="{'background':'url(' + item.thumb + ')' , 'background-repeat'
									:'no-repeat', 'background-size' :'100% 100%' }" @tap="bigImg(index,2)">

								<view class="gang" v-if="item.stock > 0 && p_type != 2 && p_type != 3">
									<!-- {{item.stock}}/{{item.stock + item.sales}} -->
									{{item.title | titeFilter}} (<text v-if="play_type == 3">
										<!-- 随机 -->
										<text v-if="item.last_prize_type == 6 || item.last_prize_type == 7">赠送</text>
										<text v-else>{{formatPrice1(item.odds)}}%</text>

									</text>
									<text v-else-if="play_type == 4||play_type==7">
										<!-- 空空 -->
										<text v-if="item.last_prize_type == 3">100%</text>
										<text v-else>赠送</text>
									</text>
									<text v-else-if="play_type == 5">
										<!-- pk -->
										<text v-if="item.last_prize_type == 5">赠送</text>
										<text v-else>{{formatPrice1(item.odds)}}%</text>
									</text>

									<text v-else-if="play_type == 6">
										<!-- 概率平均 -->
										<text v-if="item.last_prize_type == 6 || item.last_prize_type == 7">赠送</text>
										<text v-else>{{formatPrice1(item.odds)}}%</text>
									</text>)

								</view>
								<view class="gang1" v-if=" item.stock == 0 && p_type != 2 && p_type != 3">
									<view class="sw">售罄</view>
								</view>
								<!-- <view class="he">
										05/20出荷
									</view> -->
							</view>

							<view class="right">
								<view class="title">
									{{item.title}}
								</view>
								<view class="price">
									<view class="price">
										参考价:
										<text
											style="font-weight: bold;color: #FF0000;">￥{{formatPrice(item.money_price)}}</text>
									</view>
								</view>
							</view>
						</view>


					</scroll-view>
				</view>
			</view>
		</view>
		<!-- <view class="placeholder" v-show="showPlaceholder"></view> -->

		<OpenBoxPopupTheme2 :config="config" boxImgMode="square" :tryMode="isTryMode" v-if="isShowResultPopup"
			:order="order" @close="goBack" :bdInfo="prebdInfo" :play_type="play_type" :boxImg="boxImage">
		</OpenBoxPopupTheme2>

		<RecordList v-if="isShowRankList" @close="closeBangdan" :skuLevel="skuLevel" :info="goods">
		</RecordList>

		<PayCard :info="payInfo" @close="hidePayPopup" @success="paySuccess" v-if="isPayPopup"></PayCard>
		<view class="bottom-fixed">
			<view class="show2" v-if="play_type == 3 || play_type == 6">
				<view class="con" @tap="pay(1)">
					开x1
				</view>
				<view class="con" @tap="pay(5)">
					开x5
				</view>
				<view class="con" @tap="pay(10)">
					开x10
				</view>
				<view class="con" @tap="pay(30)">
					开x30
				</view>
			</view>
			<view class="show2" v-if="play_type==7">
				<view class="con" @tap="pay(1)">
					开x1
				</view>
				<view class="con" @tap="pay(3)">
					开x3
				</view>
				<view class="con" @tap="pay(5)">
					开x5
				</view>

			</view>
			<view class="menu-box">
				<view class="left" @tap="huan()">
					换箱
				</view>

				<view style="display: inline-block;" v-if="play_type == 4 || play_type == 5">
					<view class="right" @tap="pay(1)">
						来一{{isPayPopup?" ":""}}发
					</view>

				</view>

				<view style="display: inline-block;" v-else>
					<view class="right" @tap="allPlay" v-if="quanshow">
						全开
					</view>
					<view class="right1" v-else>
						全开
					</view>
				</view>
			</view>
		</view>


		<uni-popup ref="huan" type="center">
			<view class="huanCon">
				<view style="text-align: center;">温馨提示</view>
				<input class="ip" type="number" v-model="changeNum" placeholder="请输入要换的箱子序号"
					placeholder-style="color:#333333;font-size:22rpx">
				<view class="btn">
					<view class="left" @tap="closeHuan">取消</view>
					<view class="right" @tap="huanTrue">确认</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="xiang" type="center">
			<view class="xiangCon">
				<image @tap="tipsClose" class="close-btn" src="../../static/chouShang/close-icon.png" mode="widthFix">
				</image>
				<view style="text-align: center;">温馨提示</view>
				<image :src="tipsImg" mode="widthFix"></image>
				<view class="tips">{{tips}}</view>
			</view>
		</uni-popup>

		<uni-popup ref="rule" type="center" style="width: 100%;">
			<view class="ruleCon">
				<image @tap="tipsClose" class="close-btn" src="../../static/chouShang/close-icon.png" mode="widthFix">
				</image>
				<view style="text-align: center;">本箱规则</view>
				<view class="rule_content" style="white-space:pre-wrap;" v-html="ruleContent">
				</view>

			</view>
		</uni-popup>

		<uni-popup ref="tu" type="center">
			<view class="tuCon">
				<image @tap="tuClose" class="close-btn" src="../../static/chouShang/close-icon.png" mode="widthFix">
				</image>
				<image class="thumb" :src="imgInfo.thumb" mode="widthFix"></image>

				<view>{{imgInfo.title}}</view>
				<view style="font-size:22rpx">参考价:{{formatPrice(imgInfo.money_price)}}元</view>



				<view class="gl">
					获得概率:

					<text v-if="play_type == 3">
						<!-- 随机 -->
						<text v-if="imgInfo.last_prize_type == 6 || imgInfo.last_prize_type == 7">赠送</text>
						<text v-else>{{formatPrice1(imgInfo.odds)}}%</text>

					</text>
					<text v-else-if="play_type == 4||play_type==7">
						<!-- 空空 -->
						<text v-if="imgInfo.last_prize_type == 3">100%</text>
						<text v-else>赠送</text>
					</text>
					<text v-else-if="play_type == 5">
						<!-- pk -->
						<text v-if="imgInfo.last_prize_type == 5">赠送</text>
						<text v-else>{{formatPrice1(imgInfo.odds)}}%</text>
					</text>

					<text v-else-if="play_type == 6">
						<!-- 概率平均 -->
						<text v-if="imgInfo.last_prize_type == 6 || imgInfo.last_prize_type == 7">赠送</text>
						<text v-else>{{formatPrice1(imgInfo.odds)}}%</text>
					</text>
				</view>

			</view>
		</uni-popup>

		<uni-popup ref="bd" type="center">
			<view class="tuCon">
				<image @tap="bdClose" class="close-btn" src="../../static/chouShang/close-icon.png" mode="widthFix">
				</image>
				<image class="thumb" :src="bdInfo.thumb" mode="widthFix"></image>
				<view style="font-size:22rpx">参考价:{{formatPrice(bdInfo.money_price)}}元</view>
				<view style="color: red;margin-top: 20rpx;font-size: 25rpx;">已获得{{bdInfo.title}}</view>
			</view>
		</uni-popup>

		<FreeTicketFloatBtn2 v-if="goods.is_invite_enabled" @useFreeTicket="payInfo" :uuid="uuid" nodeType="leitai">
		</FreeTicketFloatBtn2>

		<FreeTicketFloatBtn2 v-if="goods.is_share_enabled" @useFreeTicket="payInfo" :uuid="uuid" nodeType="leitai">
		</FreeTicketFloatBtn2>

		<DrawStock @useFreeTicket="freeDraw" :uuid="uuid" nodeType="leitai"></DrawStock>

		<TopList v-if="isShowTopList" @close="closeTopList" :skuLevel="skuLevel" :info="goods">
		</TopList>

		<SharePopup v-if="isSharePopup" @close="hideSharePopup" :info="posterInfo"></SharePopup>

	</view>
</template>
<script>
	import PayCard from "./components/PayCard.vue"
	import RecordList from "./components/RecordList.vue"
	import TopList from "./components/TopList.vue"
	import {
		mapGetters
	} from "vuex"
	import {
		userLogin
	} from "../../../api/user";
	export default {
		components: {
			PayCard,
			RecordList,
			TopList
		},

		data() {
			return {
				fixedTop: false,
				showPlaceholder: false,
				titleBgColor: 'transparent',
				pageUuid: '',
				index: 0,
				min_id: 0,
				uuid: '',
				list: [],
				total: 0,
				goods: [],
				stock_has: 0,
				stock_all: 0,
				isPayPopup: false,
				num: 1,
				tips: '当前是最后一箱了',
				tipsImg: '../../static/chouShang/null.png',
				isTryMode: false,
				isShowResultPopup: false,
				isShowRankList: false,
				isShowTopList: false,
				config: {},
				order: {},
				quanshow: false,
				ruleContent: '',
				ylStatus: false,
				l1Sty: 'liang',
				l2Sty: 'hui',
				l3Sty: 'hui',
				changeNum: '',
				imgInfo: '',
				title: '',
				imgUrl: '',
				bigType: '',
				play_type: '',
				kong_xiang: 0,
				play_type: '',
				p_type: 1,
				bdInfo: [],
				bj: false,
				max_index: 0,
				dh: 'dh',
				isSharePopup: false,
				dsq: null,
				dsq1: null,
				ticket_id: null,
				run_time: 0,
				loadingTime: 0,
				prebdInfo: [],
				swiperList: []
			};
		},
		onLoad(option) {
			this.title = option.title;
			this.imgUrl = option.imgUrl;
			this.index = option.index;
			uni.$on('startShare', () => {
				this.isSharePopup = true
			})
			// this.$nextTick(() => {
			// 	uni.createSelectorQuery().in(this).select('.goods-box').boundingClientRect((rect) => {
			// 		console.log('--------->', rect.top);
			// 	}).exec()
			// })
		},

		onShow() {
			this.loadGoodsInfo(true);
			var that = this;
			var a = null;
			a = setInterval(() => {
				if (that.play_type) {
					that.auto();
					clearInterval(a);
				}
			}, 2000)
			// var b = null;
			// b = setInterval(() => {
			// 	if (that.run_time>1000) {
			// 		clearInterval(b);
			// 		that.auto1();
			// 	}
			// }, 2000)
		},

		onHide() {
			clearInterval(this.dsq);
			// clearInterval(this.dsq1);
		},
		onPageScroll(e) {
			// let _this = this;
			// console.log(e.scrollTop);
			// if( e.scrollTop >= 554){
			// 	this.fixedTop = true
			// }else{
			// 	this.fixedTop = false
			// }
		},

		onUnload() {
			clearInterval(this.dsq);
			// clearInterval(this.dsq1);
		},

		// onShareAppMessage() {
		// 	return {
		// 		title: decodeURIComponent(this.title),
		// 		path: '/packageA/pages/leiTai/index?title='+this.title+'&imgUrl='+this.imgUrl, //用户点开后的默认页面，我默认为首页
		// 		imageUrl: this.imgUrl, //自定义图片的地址
		// 		success(res) {
		// 			console.log('分享成功！')
		// 		}
		// 	}
		// },
		filters: {
			titeFilter(e) {
				e = e.replace(/^\s+|\s+$/g, "");
				let arr = e.split(" ");
				if (arr[0]) {
					if (arr[0].indexOf('基础') >= 0) {
						return "基础款"
					} else {
						return arr[0]
					}
				} else {
					return ""
				}

			},
		},
		computed: {
			...mapGetters(["userInfo"]),
			payInfo() {
				console.log(this.list, 'this.list[0]')
				return {
					// page_uuid: this.pageUuid,
					title: this.goods.title,
					activity_id: this.list[0].id,
					payNum: this.num,
					total: this.num * this.list[0].money_price,
					money_price: this.list.money_price,
					score_price: this.goods.score_price
				}
			},

			boxImage() {
				return this.goods.image_3d || 'https://cdn2.hquesoft.com/box/fudai/box.png'
			},

			skuLevel() {
				return this.goods.sku_level || []
			},
			share() {
				return {
					title: decodeURIComponent(this.title),
					thumb: this.imgUrl,
					path: '/packageA/pages/leiTai/index?title=' + this.title + '&imgUrl=' + this.imgUrl + '&uuid=' + this
						.uuid +
						'&invite_node=leitai-' + this.uuid
				}
			},
			posterInfo() {
				return {
					money_price: this.list[0].money_price,
					title: this.list[0].title,
					path: this.getShareConfig().path,
					thumb: this.list[0].thumb
				}
			},
		},

		methods: {
			set_ticket_id(e) {
				console.log(e, 678);
				this.ticket_id = e;
			},
			fnOpenBox() {
				uni.showLoading({
					title: '提交中',
					mask: true,
					icon: 'none'
				})
				this.$http('/leitaiChk/openBox', 'GET', {
					play_type: this.play_type,
					id: this.goods.id
				}).then(res => {
					uni.hideLoading()
				})
			},
			freeDraw() {
				console.log(3132);
				if (this.isSubmiting) {
					return false
				}

				uni.showLoading({
					title: '提交中',
					icon: 'none'
				})

				this.isSubmiting = true
				setTimeout(() => {
					this.isSubmiting = false
				}, 1500)

				this.$http('/leitais/order/confirm', 'POST', {
					sharer: uni.getStorageSync('inviter'),
					activity_id: this.list[0].id,
					total: 1,
					coupon_id: null,
					is_use_free_ticket: 1,
					ticket_id: this.ticket_id,
					...this.form
				}).then(res => {
					uni.hideLoading()
					if (res.code == 203 || res.code == 222) {
						var that = this;
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 2000,
							success() {
								this.loadGoodsInfo();
							}
						})

					} else if (res.code == 201) {
						console.log(3333);
						let info = res.data
						if (info.is_need_pay) {
							payment.pay({
								pay_config: info.pay_config,
								success: () => {
									// uni.showToast({
									// 	title: "支付成功",
									// 	icon: "none"
									// })
									console.log(info, 6666);

									var that = this;
									uni.showToast({
										title: res.msg,
										icon: "none",
										duration: 2000,
										success() {
											that.$http('/asset/package', 'GET', {
												order_id: res.data.order_id
											}).then(res => {
												this.loadGoodsInfo();
												this.bdImg();
											})
										}
									})
								},
								fail: () => {
									uni.showToast({
										title: "支付失败",
										icon: "none"
									})

									// 关闭订单
									this.$http(`/orders/${info.order.uuid}`, 'PUT', {
										type: 'close_and_delete'
									})
								}
							})
						} else {
							console.log(456);
							var that = this;
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 2000,
								success() {
									that.$http('/asset/package', 'GET', {
										order_id: res.data.order_id
									}).then(res => {
										this.loadGoodsInfo();
										this.bdImg();
									})

								}
							})
						}
					} else {
						console.log(111);
						let info = res.data
						if (info.is_need_pay) {
							payment.pay({
								pay_config: info.pay_config,
								success: () => {
									// uni.showToast({
									// 	title: "支付成功",
									// 	icon: "none"
									// })
									console.log(info, 333);

									this.paySuccess(info.order)
								},
								fail: () => {
									uni.showToast({
										title: "支付失败",
										icon: "none"
									})

									// 关闭订单
									this.$http(`/orders/${info.order.uuid}`, 'PUT', {
										type: 'close_and_delete'
									})
								}
							})
						} else {
							console.log(info, 111);
							this.paySuccess(info.order)
						}
					}


				})
			},
			auto() {
				var that = this;

				if (this.play_type == 4 || this.play_type == 5 || this.play_type == 7) {
					that.dsq = setInterval(() => {
						if (that.loadingTime != null) {
							//两秒
							if (that.loadingTime % 2 == 0 && that.loadingTime != 0 && that.stock_has != 0) {

								that.loadGoodsInfo();
							} else {
								that.loadingTime++;
							}

						}

					}, 1000)
				}
			},
			auto1() {
				var that = this;
				if (this.play_type == 4 || this.play_type == 5 || this.play_type == 7) {
					that.dsq1 = setInterval(() => {
						that.loadGoodsInfo();
						that.check();
					}, that.run_time)
				}
			},
			hideSharePopup() {
				this.isSharePopup = false
			},
			closeTopList() {
				this.isShowTopList = false
			},

			openBangdan1() {
				this.isShowTopList = true
			},

			stockStatus(e) {
				if (e == 0) {
					return 'sq';
				} else {
					return '';
				}
			},
			huan() {
				this.$refs.huan.open()
			},
			closeHuan() {
				this.$refs.huan.close()
			},
			bigImg(index, e) {
				this.bigType = e;
				if (e == 1) {
					this.imgInfo = this.goods.last_skus[index];

				} else {
					this.imgInfo = this.goods.skus[index];
				}
				console.log(this.bigType);
				console.log(this.imgInfo);
				this.$refs.tu.open()
			},
			tuClose() {
				this.$refs.tu.close();
			},
			bdImg(index, e) {

				if (this.play_type == 4 || this.play_type == 7) {
					this.$refs.bd.open()
				}
			},
			bdClose() {
				this.$refs.bd.close();
			},
			st_ff() {
				console.info(11)
			},
			huanTrue() {

				if (this.play_type == 4 || this.play_type == 5 || this.play_type == 7) {
					//this.min_id
					if (this.changeNum >= 1 && this.changeNum <= (this.max_index + 1)) {
						this.closeHuan();
						this.index = this.changeNum;
						console.log(this.index);

						this.loadGoodsInfo(true);
						this.changeNum = '';
						this.$forceUpdate()
					} else {
						uni.showToast({
							title: '请输入1到' + (this.max_index + 1) + '之间的箱子序号',
							icon: "none"
						})
					}
				} else {
					if (this.changeNum >= 1 && this.changeNum <= this.total) {
						this.closeHuan();
						this.index = this.changeNum;
						console.log(this.index);

						this.loadGoodsInfo();
						this.changeNum = '';
						this.$forceUpdate()
					} else {
						uni.showToast({
							title: '请输入1到' + this.total + '之间的箱子序号',
							icon: "none"
						})
					}
				}
			},
			styChange(num) {
				if (num == 1) {
					this.ylStatus = false;
					this.l1Sty = 'liang';
					this.l2Sty = 'hui';
				} else {
					this.ylStatus = true;
					this.l1Sty = 'hui';
					this.l2Sty = 'liang';
				}
			},

			styChange1(num) {
				if (num == 1) {
					this.l1Sty = 'liang';
					this.l2Sty = 'hui';
					this.l3Sty = 'hui';
				} else if (num == 2) {
					this.l1Sty = 'hui';
					this.l2Sty = 'liang';
					this.l3Sty = 'hui';
				} else {
					this.l1Sty = 'hui';
					this.l2Sty = 'hui';
					this.l3Sty = 'liang';
				}
				this.p_type = num;
				this.itemInfo()
			},

			formatPrice(price) {
				return (price / 100).toFixed(2)
			},
			formatPrice1(price) {
				// console.log(price);
				if (price == null || price == undefined) {
					return price
				} else {
					return (price * 1).toFixed(3)
				}
			},
			closeBangdan() {
				this.isShowRankList = false
			},
			openBangdan() {
				this.isShowRankList = true
			},

			check() {
				var that = this;
				this.$http(`/leitais_jiqiren/${this.uuid}`, 'GET').then(res => {
					if (res.code == 111111) {
						clearInterval(that.dsq1);
					}
				})
			},
			fnCheckMax() {
				this.$http('/leitais', 'GET', {
					title: this.title,
					min_id: this.index
				}).then(res => {
					this.loadingTime = 0;

					this.total = res.data.item_total;
					this.max_index = res.data.max_index + 1;

					this.list = res.data.list;
					this.config = {
						'animation_mode': "theme1",
						'is_show_rank': 0,
						'show_odds_mode': "disable"
					}
					this.play_type = res.data.play_type


					if (res.data.min_id < res.data.item_total) {
						if (!this.bj) {
							//如果请求之后，刚好有人点击，则不重置index
							this.index = parseInt(res.data.min_id) + 1;
							this.min_id = res.data.min_id
						}

					} else {
						this.index = parseInt(res.data.min_id) - 1;
						this.min_id = parseInt(res.data.min_id) - 1;
					}
					let {
						max_index,
						min_id
					} = res.data;
					if (max_index != min_id) {
						this.index = this.max_index;
						this.loadGoodsInfo(true);
					} else {
						this.uuid = this.list[0]['uuid'];
						setTimeout(() => {
							uni.hideLoading()
						}, 500)
						this.itemInfo();
						if (this.play_type == 4 || this.play_type == 7) {
							this.kongche()
						};
					}


				})
			},
			loadGoodsInfo(flag) {
				//flag  有值就是点击 需要请求总箱数/leitais
				// loadGoodsInfo1

				if (flag) {
					this.loadingTime = null;
					uni.showLoading({
						'mask': true,
						'title': '加载中...'
					})
					console.info("请求接口:/leitais")
					console.info("title:" + this.title + "min_id：" + this.index)
					this.$http('/leitais', 'GET', {
						title: this.title,
						min_id: this.index
					}).then(res => {
						this.loadingTime = 0;
						console.log('res', res);
						this.total = res.data.item_total;
						this.max_index = res.data.max_index + 1;
						console.log(this.total);
						this.list = res.data.list;
						this.config = {
							'animation_mode': "theme1",
							'is_show_rank': 0,
							'show_odds_mode': "disable"
						}
						this.play_type = res.data.play_type


						if (res.data.min_id < res.data.item_total) {
							if (!this.bj) {
								//如果请求之后，刚好有人点击，则不重置index
								this.index = parseInt(res.data.min_id) + 1;
								this.min_id = res.data.min_id
							}

						} else {
							this.index = parseInt(res.data.min_id) - 1;
							this.min_id = parseInt(res.data.min_id) - 1;
						}
						if (this.list.length > 0) {
							this.uuid = this.list[0]['uuid'];
						}
						setTimeout(() => {
							uni.hideLoading()
						}, 1000)
						this.itemInfo();
						if (this.play_type == 4 || this.play_type == 7) {
							this.kongche()
						};



					}).catch(er => {
						console.log(er);
					})

				} else {
					uni.hideLoading()
					this.loadingTime = null;
					this.itemInfo(() => {
						this.loadingTime = 0;
					});

					if (this.play_type == 4 || this.play_type == 7) {
						this.kongche()
					}
				}
			},

			kongche() {
				if (this.userInfo && this.userInfo.id) {
					this.$http('/leitai_kongche', 'GET', {
						activity_title: this.title
					}).then(res => {
						console.log(res);
						this.kong_xiang = res.data
					})
				}
			},

			ref() {
				this.loadGoodsInfo(true);
				var that = this;
				this.$nextTick(function() {
					this.dh = '';
					setTimeout(() => {
						that.dh = 'dh' //设置动画
					}, 200)
				})
			},


			last() {
				if (this.index == 1) {
					this.tips = '当前已是第1箱';
					this.tipsImg = '../../static/chouShang/qin.png';
					this.$refs.xiang.open()
					return false;
				} else {

					if (this.bj) {
						uni.showLoading({
							'mask': true,
							'title': '加载中...'
						})
					} else {

						this.bj = true;
						this.index = this.index - 1;
						this.loadGoodsInfo(true);
						var that = this;
						this.$nextTick(function() {
							this.dh = '';
							setTimeout(() => {
								that.dh = 'dh' //设置动画
							}, 200)
						})
					}

				}

			},

			next() {
				//擂台和随机都是用这个
				if (this.play_type == 4 || this.play_type == 5 || this.play_type == 7) {
					if (this.stock_has > 0) {
						this.tips = '当前箱子暂未开完';
						this.tipsImg = '../../static/chouShang/null.png';
						this.$refs.xiang.open()
						return false;
					} else {
						if (this.bj) {

							uni.showLoading({
								'mask': true,
								'title': '加载中...'
							})
						} else {

							this.bj = true;
							// this.index = this.index + 1;
							// if(this.index == this.max_index){
							// this.index = this.index + 1;
							// }else{
							//2023年5月16日需要点击到最后
							this.index = this.max_index;
							// this.stock_has=this.stock_all;

							// }

							this.fnCheckMax()
							// console.log(this.max_index);

							var that = this;
							this.$nextTick(function() {
								this.dh = '';
								setTimeout(() => {
									that.dh = 'dh' //设置动画
								}, 200)
							})
						}

					}
				} else {
					if (this.index >= (this.total)) {
						this.tips = '当前是最后一箱了';
						this.tipsImg = '../../static/chouShang/null.png';
						this.$refs.xiang.open()
						return false;
					} else {
						uni.showLoading({
							'mask': true,
							'title': '加载中...'
						})
						if (this.bj) {
							uni.showLoading({
								'mask': true,
								'title': '加载中...'
							})
						} else {

							this.bj = true;
							this.index = this.index + 1;
							this.loadGoodsInfo(true);

							var that = this;
							this.$nextTick(function() {
								this.dh = '';
								setTimeout(() => {
									that.dh = 'dh' //设置动画
								}, 200)
							})
						}

					}
				}
			},

			itemInfo(fn) {
				console.log(this.play_type, this.list[0], this.list, 'xxx')
				if (this.play_type == 5) {
					var url = `/leitais_sku/${this.list[0]['id']}?type=` + this.p_type
				} else {
					var url = `/leitais/${this.uuid}`;
				}

				this.$http(url).then(res => {
					this.goods = res.data.info;
					console.log(this.goods, res, '--------------');
					this.swiperList = this.goods.skus.map((e) => {
						return {
							image: e.thumb
						}
					})
					this.stock_has = res.data.info.stock_has;
					this.stock_all = res.data.info.stock_all;
					console.log(this.goods, this.swiperList, '--------------');
					this.ruleContent = res.data.info.rules;
					var sy = this.stock_has / this.stock_all * 100;
					this.quanshow = false;
					fn ? fn() : null
					if (sy <= 30) {
						if (this.play_type == 3 || this.play_type == 6) {
							this.quanshow = true;
						}
					}

					if (this.play_type == 4 || this.play_type == 7) {
						res.data.info.skus.forEach((item, index, arr) => {
							if (item.last_prize_type == 3) {
								this.bdInfo = item;
								return;
							}
						})

					}
					console.log(res.data.info.skus, 'res.data.info.skus.')
					res.data.info.skus.forEach((item, index, arr) => {
						console.log('this.prebdInfo', item, this.prebdInfo.length)
						// if (item.last_prize_type == 3 && this.prebdInfo.length == 0) {
						if (item.title && item.title.indexOf('基础') >= 0 && this.prebdInfo.length == 0) {
							item.total = 1;
							this.prebdInfo = [item];

						}
					})
					this.bj = false;


					if (res.data.info.run_time > 0) {
						console.log(2222);
						if (res.data.info.run_time < 1000) {
							this.run_time = 1000;
						} else {
							this.run_time = res.data.info.run_time;
						}

					}
					console.log(this.run_time);

				})

			},

			pay(num) {
				if (!this.isPayPopup) {
					this.num = num;
					this.isPayPopup = true
				}
			},

			allPlay() {
				this.num = this.stock_has;
				this.isPayPopup = true
			},

			paySuccess(order, isTryMode = false) {
				this.isTryMode = isTryMode
				this.order = order
				this.isPayPopup = false
				this.isShowResultPopup = true
				// 购买成功
				this.refresh()
			},

			refresh() {
				this.$store.dispatch("getUserInfo");
			},
			hidePayPopup() {
				this.isPayPopup = false;
			},
			tipsClose() {
				this.$refs.xiang.close();
				this.$refs.rule.close()
			},

			rule() {
				this.$refs.rule.open()
			},
			goBack() {
				this.isShowResultPopup = false;
				this.loadGoodsInfo()
			},
		}
	};
</script>
<style lang='scss'>
	.content {
		width: 100%;
		background: #F4E4C2;
		overflow-x: hidden;
		overflow-y: auto;

		.top {
			width: 100%;
			position: relative;

			.topbg {
				width: 100%;
				position: absolute;
				top: 0;
				z-index: 2;
			}

			/* #ifdef APP-PLUS */
			.left-menu {
				z-index: 99;
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 14%;
				font-size: 20rpx;
				color: #fff;
				position: fixed;
				top: 12%;


				.item {
					text-align: center;

					image {
						width: 50%;
						margin-top: 30rpx;
					}
				}
			}


			.center-img {
				width: 100%;
				margin-left: 3%;
				position: relative;
				z-index: 8;

				image {
					width: 94%;
				}
			}

			.right-menu {
				z-index: 99;
				font-size: 20rpx;
				color: #fff;
				position: absolute;
				top: 15%;
				right: 0;

				.item1 {
					width: 170rpx;
					height: 64rpx;
					line-height: 64rpx;
					background: url('../../static/chouShang/mysd.png') no-repeat;
					background-size: 100% 100%;
					text-align: center;
					padding-left: 10%;
				}

				.item2 {
					margin-top: 20rpx;
					width: 170rpx;
					height: 64rpx;
					line-height: 64rpx;
					background: url('../../static/chouShang/drawLog.png') no-repeat;
					background-size: 100% 100%;
					text-align: center;
					padding-left: 10%;
				}
			}

			.bottom-box {
				width: 100%;
				height: 500rpx;
				font-weight: bold;
				position: relative;
				z-index: 9;
				margin: 0 auto;
				padding: 1rpx;

				.img-bg {
					position: absolute;
					top: 0rpx;
					width: 750rpx;
					height: 450rpx;
					left: 50%;
					margin-left: -375rpx;
					z-index: 1;
				}

				.line1 {
					margin-top: 30rpx;
					position: relative;
					z-index: 3;
					text-align: center;
					margin-left: -60rpx;

					.liang {
						font-size: 40rpx;
						color: rgba(255, 255, 255, 1);
						margin-left: 10rpx;
					}

					.hui {
						font-size: 30rpx;
						color: rgba(255, 255, 255, 0.7);
						margin-left: 10rpx;
					}
				}

				.line1_1 {
					margin-top: 30rpx;
					margin-left: 50rpx;

					.liang {
						font-size: 26rpx;
						color: rgba(255, 255, 255, 1);
						margin-left: 10rpx;
					}

					.hui {
						font-size: 22rpx;
						color: rgba(255, 255, 255, 0.7);
						margin-left: 10rpx;
					}
				}

				.line2 {
					display: flex;
					align-items: center;
					justify-content: space-around;
					height: 200rpx;
					position: relative;
					z-index: 3;
					margin-top: 10rpx;
					padding: 0 100rpx;

					/* margin-top: 15rpx;
					margin-left: 60rpx; */
					.item {
						display: flex;
						flex-direction: column;
						color: #847363;
						font-size: 24rpx;
					}

					@keyframes bigTosmall {
						0% {
							transform: scale(1.2);
						}


						100% {
							transform: scale(1);
						}
					}

					.mr {
						font-size: 34rpx;
						text-align: center;
						color: #493A2C !important;
						margin-bottom: 4rpx;
					}

					.dh {
						display: inline-block;
						animation: bigTosmall 1s linear;
						animation-fill-mode: forwards;
					}
				}

				.line3 {
					width: 132rpx;
					height: 40rpx;
					line-height: 40rpx;
					background: url('../../static/chouShang/kong.png') no-repeat;
					background-size: 100% 100%;
					text-align: center;
					color: rgba(255, 255, 255, 1);
					margin-top: -6%;
					margin-left: 40%;
					font-size: 20rpx;
				}

				.line3_1 {
					width: 132rpx;
					height: 40rpx;
					line-height: 40rpx;
					background-size: 100% 100%;
					text-align: center;
					color: rgba(255, 255, 255, 1);
					margin-top: -8%;
					margin-left: 40%;
					font-size: 20rpx;
				}

				.line4 {
					margin-top: -10rpx;
					width: 100%;
					font-weight: normal;
					/* padding: 0 100rpx; */
					position: relative;
					z-index: 3;
					display: flex;
					align-items: center;
					justify-content: center;

					/* background-color: red; */
					.last,
					.next {
						width: 240rpx;
						height: 95rpx;
					}

					/* .next {
						width: 208rpx;
						height: 92rpx;
						text-align: center;
						line-height: 74rpx;
						background: url('../../static/new/detail_next.png') no-repeat;
						background-size: 100% 100%;
					} */
				}
			}
		}

		.goods-box {
			background: #FF7F4E;
			margin-top: -100rpx;
			position: relative;
			z-index: 9;
			padding: 0 40rpx;
			border-radius: 50rpx;
			margin-bottom: 100rpx;
			box-sizing: border-box;
			width: 100%;
		}

		.placeholder {
			margin-bottom: 100rpx;
		}

		.fixedTop {
			position: fixed;
			top: 200px;
		}

		.tit {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			z-index: 2;
			position: relative;
			padding: 34rpx;
			box-sizing: border-box;

			.tips {
				width: 274rpx;
				height: 52rpx;
				text-align: center;
				line-height: 52rpx;
				color: #FFF3C7;
				background: url('../../static/chouShang/tips-bg.png') no-repeat;
				background-size: 100% 100%;
				margin: 0 20rpx;
			}

			.ref {
				image {
					width: 50rpx;
				}
			}

			.msg {
				width: 120rpx;
				height: 52rpx;
				line-height: 52rpx;
				text-align: center;
				background: #fff;
				border-radius: 26rpx;

				image {
					width: 25%;
					vertical-align: middle;
					margin-top: -5rpx;
				}

				.num {
					width: 35rpx;
					height: 35rpx;
					border-radius: 100%;
					position: relative;
					margin-left: 48px;
					margin-top: -35px;
					background-color: #e67217;
					line-height: 35rpx;
					color: #fff;
				}

			}

		}

		/* #endif */




		.goods {
			width: 94%;
			/* height: 40vh; */
			background: rgba(255, 255, 255, 0.88);
			border-radius: 12px;
			padding: 5% 3%;
			position: relative;
			/* margin-top: -5%; */
			margin-bottom: 18vh;

			.hang {
				width: 100%;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: center;
				/* padding-bottom: 16vh; */

				.item {
					width: 48%;
					margin-top: 20rpx;
					display: inline-flex;
					justify-content: space-between;
					align-items: center;

					.left {
						width: 40%;
						height: 140rpx;
						border-radius: 12rpx;
						/* background: url('../../static/chouShang/face.png') no-repeat; */
						background-size: 100% 100%;
						border: 1px solid #FFFFFF;
						font-size: 22rpx;
						color: #fff;

						.gang {

							width: 95%;
							height: 40rpx;
							text-align: center;
							line-height: 40rpx;
							background: url('../../static/chouShang/gbg.png') no-repeat;
							background-size: 100% 100%;
							white-space: nowrap;
							overflow-x: hidden;
							text-overflow: ellipsis;
						}

						.gang1 {
							width: 100%;
							height: 100%;
							text-align: center !important;
							background-color: rgba(0, 0, 0, 0.6);
							border-radius: 12rpx;

							.sw {
								width: 30%;
								height: 75rpx;
								border: 2px solid #fff;
								background-color: red;
								color: #fff;
								font-size: 28rpx;
								font-weight: bold;
								transform: translateX(90%) translateY(35%);
							}

						}



						.he {
							height: 40rpx;
							line-height: 40rpx;
							margin-top: 59rpx;
							text-align: center;
							background: rgba(0, 0, 0, 0.5);
							border-radius: 0px 0px 5px 5px;
						}

					}

					.right {
						width: 58%;
						height: 140rpx;

						.title {
							font-size: 24rpx;
							height: 65rpx;
							/* height: 65rpx; */
							display: -webkit-box;
							overflow: hidden;
							text-overflow: ellipsis;
							word-wrap: break-word;
							white-space: normal !important;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							color: #33251A;
						}

						.price {
							font-size: 22rpx;
							color: #847363;
						}

						.gl {
							font-size: 22rpx;
							color: #5C4737;
							margin-top: 10rpx;
						}

					}
				}

				.yl-item {
					width: 100%;
					height: 50rpx;
					line-height: 50rpx;
					padding: 4rpx;
					display: inline-flex;
					justify-content: space-between;
					align-items: center;
					background: #FFF2D7;
					border-radius: 6rpx;
					margin-top: 10rpx;
					font-size: 28rpx;

					.title {
						width: 35%;
						padding-left: 20rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 30rpx;
						color: #493A2C;

					}

					.num {
						width: 20%;
						color: #33251A;
						font-size: 24rpx;
						margin-left: 5rpx;
						/* text-align: center; */
					}

					.bl {
						flex: 1;
						/* width: 35%; */
						/* text-align: left; */
						padding-right: 20rpx;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						.icon {
							width: 8%;
							vertical-align: middle;
						}
					}
				}


			}

		}

		.bottom-fixed {
			position: fixed;
			bottom: 0;
			/* padding-bottom: 10%; */
			background-color: #E4502E; //E4502E
			z-index: 10;
			width: 100%;
			box-sizing: border-box;
		}

		.show2 {
			width: 100%;
			/* left: 35%; */
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			box-sizing: border-box;
			margin-top: -40rpx;

			.con {
				width: 232rpx;
				height: 140rpx;
				line-height: 130rpx;
				text-align: center;
				background: url('../../static/chouShang/show.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}

		}

		.menu-box {
			width: 100%;
			/* left: 0; */
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: #D33C00;
			z-index: 999;
			display: flex;
			align-items: center;
			justify-content: center;

			.left {
				width: 416rpx;
				height: 176rpx;
				text-align: center;
				line-height: 176rpx;
				background: url('../../static/new/detail_btn_bg.png') no-repeat;
				background-size: 100% 100%;
				display: inline-block;
				border-radius: 176rpx;
			}

			.right {
				/* margin-left: 30rpx; */
				width: 416rpx;
				height: 176rpx;
				text-align: center;
				line-height: 176rpx;
				background: url('../../static/new/detail_btn_bg.png') no-repeat;
				background-size: 100% 100%;
				display: inline-block;
				border-radius: 176rpx;
			}

			.right1 {
				/* margin-left: 30rpx; */
				width: 416rpx;
				height: 176rpx;
				text-align: center;
				line-height: 176rpx;
				background: url('../../static/new/detail_btn_bg.png') no-repeat;
				background-size: 100% 100%;
				display: inline-block;
				border-radius: 176rpx;
			}
		}

		.huanCon {
			width: 400rpx;
			margin: 0 auto;
			padding: 50rpx;
			background: #fff;
			min-height: 250rpx;
			border-radius: 20rpx;

			input {
				height: 50rpx;
				border: 2rpx solid #ccc;
				margin: 60rpx 20rpx;
				border-radius: 10rpx;
				padding-left: 20rpx;
			}

			.btn {
				display: flex;
				justify-content: space-between;

				.left {
					width: 40%;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					color: #A6A6A6;
				}

				.right {
					width: 40%;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
				}
			}


		}

		.ruleCon {
			width: 400rpx;
			margin: 0 auto;
			padding: 50rpx;
			background: #fff;
			min-height: 500rpx;
			border-radius: 20rpx;

			.rule_content {
				font-size: 26rpx;
				font-weight: 400;
				color: #666666;
				line-height: 44rpx;
			}

			.close-btn {
				width: 10%;
				position: absolute;
				right: 0;
				top: 0;
			}

		}

		.xiangCon {
			background: #fff;
			width: 260px;
			padding: 30rpx 0;
			background: #FFFFFF;
			border-radius: 12px;
			text-align: center;

			image {
				width: 35%;
			}

			.tips {
				font-size: 26rpx;
				color: #A6A6A6;
			}

			.close-btn {
				height: 31.1875px;
				width: 12%;
				position: absolute;
				right: 0;
				top: 0;
			}
		}

		.tuCon {
			width: 500rpx;
			margin: 0 auto;
			padding: 50rpx;
			background: #fff;
			min-height: 250rpx;
			border-radius: 20rpx;

			.thumb {
				width: 100%;
			}




			.gl {
				font-size: 22rpx
			}

			.close-btn {
				height: 31.1875px;
				width: 12%;
				position: absolute;
				right: 0;
				top: 0;
			}
		}


	}
</style>
